<template>
  <div class="form">
    <div class="content">
      <form action="">
        <div class="name">
          <div class="firstname">
            <!-- 用span包裹*，添加red-star类 -->
            <label for="firstName">First Name <span class="red-star">*</span></label>
            <input type="text" id="firstName" placeholder="First name" />
          </div>
          <div class="lastname">
            <label for="lastName">Last Name</label>
            <input type="text" id="lastName" placeholder="Last name" />
          </div>
        </div>
        <div class="email">
          <!-- 用span包裹*，添加red-star类 -->
          <label for="email">Email <span class="red-star">*</span></label>
          <input type="email" id="email" placeholder="Email Address" />
        </div>
        <div class="subject">
          <label for="subject">Subject</label>
          <input type="text" id="subject" placeholder="Subject" />
        </div>
        <div class="message">
          <!-- 用span包裹*，添加red-star类 -->
          <label for="message">Your Message <span class="red-star">*</span></label>
          <textarea id="message" placeholder="Your Message" rows="5"></textarea>
        </div>
        <button type="submit" class="submit-btn">Submit Form</button>
      </form>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped lang='scss'>
.form {
  width: 480px;
  margin-left: 10px;
  margin-top: -80px; 
  padding: 50px 40px 40px 40px;
  background: #f3f9fc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .content {
    width: 100%;
    form {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .name {
        display: flex;
        gap: 20px;

        .firstname,
        .lastname {
          display: flex;
          flex-direction: column;
          flex: 1;

          label {
            padding-bottom: 5px;
            font-weight: 600;
            display: flex; // 使label内元素同行
            align-items: center; // 垂直居中
          }

          input {
            width: 100%;
            padding: 6px 16px;
            border: 0.83px solid #dbe6ed;
            border-radius: 4px;
            outline: none;
            box-sizing: border-box;
            &:focus {
              border-color: #0b5d98;
            }
          }
        }
      }

      .email,
      .subject,
      .message {
        display: flex;
        flex-direction: column;

        label {
          padding-bottom: 5px;
          font-weight: 600;
          display: flex; // 使label内元素同行
          align-items: center; // 垂直居中
        }

        input,
        textarea {
          width: 100%;
          padding: 6px 16px;
          border: 0.83px solid #dbe6ed;
          border-radius: 4px;
          outline: none;
          box-sizing: border-box;
          &:focus {
            border-color: #0b5d98;
          }
        }

        textarea {
          resize: vertical;
          min-height: 100px;
        }
      }

      .submit-btn {
        align-self: center;
        background-color: #0b5d98;
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
        &:hover {
          background-color: #084a7a;
        }
      }
    }
  }
}
// 定义红色*的样式
.red-star {
  color: red;
  margin-left: 4px; // 与文字保持间距
}
</style>